<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> --%>
<%-- <%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %> --%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8"/>
<title>卓荻</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<meta name="renderer" content="webkit">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href='http://fonts.googleapis.com/css?family=Hind:400,500,300,600,700' rel='stylesheet' type='text/css'>
<link href="${cdnAddress}/css/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="${cdnAddress}/css/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="${cdnAddress}/css/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="${cdnAddress}/css/global/plugins/owl.carousel/assets/owl.carousel.css" rel="stylesheet">
<link href="${cdnAddress}/css/global/plugins/slider-revolution-slider/rs-plugin/css/settings.css" rel="stylesheet">
<link href="${cdnAddress}/css/global/plugins/cubeportfolio/cubeportfolio/css/cubeportfolio.min.css" rel="stylesheet">
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="${cdnAddress}/css/frontend/onepage2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="${cdnAddress}/css/frontend/onepage2/css/custom.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/mycss.css" rel="stylesheet" type="text/css"/>

 <script src="${cdnAddress}/js/boot.js${cacheVersion}" type="text/javascript"></script>
 <script src="${cdnAddress}/js/echarts.js${JSVersion}"></script>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>



<style type="text/css">
	

	.internationalization{
		/*margin-left: 60px;*/
	}

	.internationalization ul,.internationalization ul li,.internationalization ul a{
		width: 100%;
		border: 0px;
		margin: 0px;
		padding: 0px;
	}

	.internationalization { 
		list-style-type:none; 
	} 

	.internationalization ul { 
		list-style-type:none; 
	} 

	.internationalization a:hover { 
		color:#fff; 
		background:#2687eb; 
	} 

	.internationalization ul { 
		display:none; 
		position:absolute; 
		top:40px; 
		left:0; 
		width:120px; 
	}  
	
	.xareabox:placeholder{
		color:#fff;
	}
	.xareabox::-moz-placeholder {
	  color:#fff;
	  font-size:15px;
	}
	.xareabox:-ms-input-placeholder {
	  color:#fff;
	}
	.xareabox::-webkit-input-placeholder {
	  color:#fff;
	}
	.xareabox{
		color:#fff;
	}
	
	.internationalization{
		height:32px;
	}
	.page-on-scroll .internationalization{
		color:#3f5263
	}
	
	.heading-light h2,.team-bg .team-about h3{
		color:black;
	}
	.navbar-brand{
		padding:0px;
	}
	.page-header .navbar-brand img{
		width:auto;
	}
	.navbar-brand{
		padding:0px;
		padding-left:10px;
		padding-right:10px;
	}
	
	body{
		font-family: 宋体, Arial, Helvetica, sans-serif;
	}
	
	.features-bg {
	    background: #ebf5fe;
	}
	
	.clients .clients-quotes {
	    background: #ebf5fe;
	}
	
	.clients-quotes {
   		background: #ebf5fe;
	}	
	
	.slides li img{
		width:100%;
	}
	
	.pricing-bg {
	    background: #ebf5fe;
	}
		
	
	.page-header .navbar-nav li > a {
	    font-size: 14px;
	    font-weight: 600;
	    letter-spacing: 1px;
	    border: 1px solid transparent;
	    text-transform: uppercase;
	    color: #3f5263;
		}
	.navbar-brand{
	font-size:12px;
	}



/* flexslider */

.flexslider{
	position:relative;
	height:400px;
	overflow:hidden;
	background:url(${pageContext.request.contextPath}/images/official/loading.gif) 50% no-repeat;}

.slides{position:relative;z-index:1; padding-left:0px;}

.slides li{height:400px;}

.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}

.flex-control-nav li{
	display:inline-block;
	width:14px;
	height:14px;
	margin:0 5px;
	*display:inline;
	zoom:1;
}

.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;
background:url(${pageContext.request.contextPath}/images/official/dot.png) right 0 no-repeat;cursor:pointer;}

.flex-control-nav .flex-active{background-position:0 0;}



.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;list-style:none;margin:0px;}

.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}

.flex-direction-nav li a.flex-prev{left:40px;background:url(${pageContext.request.contextPath}/images/official/prev.png) center center no-repeat;}

.flex-direction-nav li a.flex-next{right:40px;background:url(${pageContext.request.contextPath}/images/official/next.png) center center no-repeat;}
.slides li,.flexslider{
	height:auto;
	}
	
	
	
	@media (min-width: 992px){
.container {
    width: 1100px;
}
}
	
	.container {
    padding-right: 0px; 
   padding-left:0px; 
	}
	
	.page-header .navbar-brand img{
    max-width: auto;
    max-height: 90%;
}

	.nav>li>a {
	    padding-left:0px;
	}
</style>

</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<!-- DOC: Apply "page-on-scroll" class to the body element to set fixed header layout -->
<body class="page-header-fixed">
<input type="hidden" id="projectName" value="${projectName}" />
<input type="hidden" id="cdnAddress" value="${cdnAddress}" />
	<!-- BEGIN MAIN LAYOUT -->
	<!-- Header BEGIN -->
    <header class="page-header">
        <nav class="navbar navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="toggle-icon">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </span>
                    </button>
                    <a class="navbar-brand" href="#intro">
                        <img class="logo-default" src="${pageContext.request.contextPath}/images/official/jodlogo.png" alt="Logo">
                        <img class="logo-scroll" src="${pageContext.request.contextPath}/images/official/jodlogo.png" alt="Logo">
                    </a>
                    
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-responsive-collapse">
                    <ul class="nav navbar-nav" id="menuUiDiv">
                       <%--   <li class="page-scroll active">
                            <a href="#intro"><spring:message code="navbar1" /></a>
                        </li>
                        
                        <li class="page-scroll">
                            <a href="#about"><spring:message code="navbar2" /></a>
                        </li>
                        <li class="page-scroll">
                            <a href="#features"><spring:message code="navbar3" /></a>
                        </li>
                        <li class="page-scroll">
                            <a href="#team"><spring:message code="navbar4" /></a>
                        </li>
                        <li class="page-scroll">
                            <a href="#clients"><spring:message code="navbar5" /></a>
                        </li>                    
                        <li class="page-scroll">
                            <a href="#portfolio"><spring:message code="navbar6" /></a>
                        </li>
                        <li class="page-scroll">
                            <a href="#pricing"><spring:message code="navbar7" /></a>
                        </li>
                        <li class="page-scroll">
                            <a href="#contact"><spring:message code="navbar8" /></a>
                        </li>
                        
                        国际化按钮begin
						 <li class="internationalization" onclick="displaySub(this)" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
							<a href="#"><spring:message code="default-language" /></a> 
							<ul> 
								<li style="padding: 0px; padding-top: 20px;"><a href="<spring:message 
								code="language" />"><spring:message code="choosable-language" /></a></li> 
		
							</ul> 
						</li> --%>
						 <%-- 国际化按钮end --%>
                    </ul>
                </div>
                <!-- End Navbar Collapse -->
            </div>
            <!--/container-->
        </nav>
    </header>
    <!-- Header END -->

    <!-- BEGIN INTRO SECTION -->
    <section id="intro">
        <!-- Slider BEGIN -->
       <div class="flexslider">
			<ul class="slides">
				<li><img src="${pageContext.request.contextPath}/images/official/1.jpg" alt="" /></li>
				<li><img src="${pageContext.request.contextPath}/images/official/2.jpg" alt="" /></li>
			</ul>
		</div>
        <!-- Slider END -->
    </section>
    <!-- END INTRO SECTION -->

    <!-- BEGIN MAIN LAYOUT -->
    <div class="page-content">
    
        <!-- SUBSCRIBE BEGIN -->
        <div class="subscribe">
            <div class="container">
                <div class="subscribe-wrap">
                    <div class="subscribe-body subscribe-desc md-margin-bottom-30">
                        <%-- <h1><spring:message code="signupfree" /></h1>
                        <p><spring:message code="mostadvanced" /></p> --%>
                    </div>
                    <div class="subscribe-body">
                        <form class="form-wrap input-field">
                            <div class="form-wrap-group">
                                <%--  <input type="name" class="form-control xareabox" id="name" 

                               	 placeholder="<spring:message code="name" />"> --%>
                            </div>
                            <div class="form-wrap-group border-left-transparent">
                                <%-- <input type="email" class="form-control xareabox" id="email" 
                               	 placeholder="<spring:message code="email" />"> --%>
                            </div>
                            <div class="form-wrap-group">
                                <%-- <button type="submit" class="btn-danger btn-md btn-block"><spring:message code="signup" /></button> --%>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div> 
        <!-- SUBSCRIBE END -->

        <!-- BEGIN ABOUT SECTION -->
        <section id="about">
            <!-- Services BEGIN -->
            <div class="container service-bg">
                <div id="about_row" class="row">
                  <%--   <div class="col-sm-4">
                        <div class="services sm-margin-bottom-100">
                            <div class="services-wrap">
                                <div class="service-body">
                                    <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/icon1.png" alt="">
                                </div>
                            </div>
                            <h2><spring:message code="abouttitle1" /></h2>
                            <p>Lorem ipsum dolor consetuer <br> erat votpat dolore</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="services sm-margin-bottom-100">
                            <div class="services-wrap">
                                <div class="service-body">
                                    <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/icon2.png" alt="">
                                </div>
                            </div>
                            <h2><spring:message code="abouttitle2" /></h2>
                            <p>Lorem ipsum dolor consetuer <br> erat votpat dolore</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="services">
                            <div class="services-wrap">
                                <div class="service-body">
                                    <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/icon3.png" alt="">
                                </div>
                            </div>
                            <h2><spring:message code="abouttitle3" /></h2>
                            <p>Lorem ipsum dolor consetuer <br> erat votpat dolore</p>
                        </div>
                    </div> --%>
                </div>
            </div>
            <!-- Services END -->
        </section>
        <!-- END ABOUT SECTION -->

        <!-- BEGIN FEATURES SECTION -->
        <section id="features">
            <!-- Features BEGIN -->
            <div class="features-bg">
                <div class="container">
                    <div class="heading">
                        <%-- <h2><spring:message code="features" /></h2>
                        <p><spring:message code="featurestext" /></p> --%>
                    </div><!-- //end heading -->

                    <!-- Features -->
                    <div class="row margin-bottom-70">
                        <div class="col-md-6 md-margin-bottom-70">
                            <div id="features_0" class="features">
                                <%-- <div class="features-in">
                                    <h3><a href="#"><spring:message code="featurestitle1" /></a></h3>
                                    <p>Lorem niam ipsum dolor sit ammet adipiscing et suitem elit et nonuy nibh elit niam dolor</p>
                                </div> --%>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div id="features_1" class="features">
                              <%--  <div class="features-in">
                                    <h3><a href="#"><spring:message code="featurestitle2" /></a></h3>
                                    <p>Lorem niam ipsum dolor sit ammet adipiscing et suitem elit et nonuy nibh elit niam dolor</p>
                                </div> --%>
                            </div>
                        </div>
                    </div><!-- //end row -->
                    <div class="row margin-bottom-80">
                        <div class="col-md-6 md-margin-bottom-70">
                            <div id="features_2" class="features">
                                <%-- <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/screen3.png" alt="">
                                <div class="features-in">
                                    <h3><a href="#"><spring:message code="featurestitle3" /></a></h3>
                                    <p>Lorem niam ipsum dolor sit ammet adipiscing et suitem elit et nonuy nibh elit niam dolor</p>
                                </div> --%>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div id="features_3" class="features">
                               <%--  <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/screen4.png" alt="">
                                <div class="features-in">
                                    <h3><a href="#"><spring:message code="featurestitle4" /></a></h3>
                                    <p>Lorem niam ipsum dolor sit ammet adipiscing et suitem elit et nonuy nibh elit niam dolor</p>
                                </div> --%>
                            </div>
                        </div>
                    </div><!-- //end row -->
                    <!-- End Features -->

             <!--        <center id="tfree"></center> -->
                </div>
            </div>
            <!-- Features END -->
        </section>
        <!-- END FEATURES SECTION -->

        <!-- BEGIN TEAM SECTION -->
        <section id="team">
            <!-- Team BEGIN -->
            <div class="team-bg parallax">
                <div class="container">
                    <div class="heading-light">
                        <%-- <h2><spring:message code="team" /></h2> --%>
                    </div><!-- //end heading -->

                    <div class="row">
                        <div class="col-md-8">
                           <%--  <div class="row">
                                <div class="col-sm-4">
                                    <div class="team-members">
                                        <div class="team-avatar">
                                            <img class="img-responsive" src="${cdnAddress}/css/frontend/onepage2/img/member/member1.png" alt="">
                                        </div>
                                        <div class="team-desc">
                                            <div class="team-details">
                                                <h4>John Doe</h4>
                                                <span><spring:message code="member1" /></span>
                                            </div>
                                            <ul class="team-socials">
                                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="team-members">
                                        <div class="team-avatar">
                                            <img class="img-responsive" src="${cdnAddress}/css/frontend/onepage2/img/member/member2.png" alt="">
                                        </div>
                                        <div class="team-desc">
                                            <div class="team-details">
                                                <h4>Melisa Doe</h4>
                                                <span><spring:message code="member2" /></span>
                                            </div>
                                            <ul class="team-socials">
                                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="team-members">
                                        <div class="team-avatar">
                                            <img class="img-responsive" src="${cdnAddress}/css/frontend/onepage2/img/member/member3.png" alt="">
                                        </div>
                                        <div class="team-desc">
                                            <div class="team-details">
                                                <h4>Alex Atkinson</h4>
                                                <span><spring:message code="member3" /></span>
                                            </div>
                                            <ul class="team-socials">
                                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>--%><!-- //end row -->
                            <%-- <div class="row"> 
                                <div class="col-sm-4">
                                    <div class="team-members">
                                        <div class="team-avatar">
                                            <img class="img-responsive" src="${cdnAddress}/css/frontend/onepage2/img/member/member4.png" alt="">
                                        </div>
                                        <div class="team-desc">
                                            <div class="team-details">
                                                <h4>John Doe</h4>
                                                <span><spring:message code="member1" /></span>
                                            </div>
                                            <ul class="team-socials">
                                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="team-members">
                                        <div class="team-avatar">
                                            <img class="img-responsive" src="${cdnAddress}/css/frontend/onepage2/img/member/member5.png" alt="">
                                        </div>
                                        <div class="team-desc">
                                            <div class="team-details">
                                                <h4>Melisa Doe</h4>
                                                <span><spring:message code="member2" /></span>
                                            </div>
                                            <ul class="team-socials">
                                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="team-members">
                                        <div class="team-avatar">
                                            <img class="img-responsive" src="${cdnAddress}/css/frontend/onepage2/img/member/member6.png" alt="">
                                        </div>
                                        <div class="team-desc">
                                            <div class="team-details">
                                                <h4>Alex Atkinson</h4>
                                                <span><spring:message code="member3" /></span>
                                            </div>
                                            <ul class="team-socials">
                                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div> --%><!-- //end row -->
                        </div>
                        <div class="col-md-4">
                            <div class="team-about">
                              <%--    <h3><spring:message code="teamtitle1" /></h3>
                                <p>Lorem niam ipsum dolor sit ammet adipiscing et suitem elit et nonuy nibh elit niam dolor suit elit amet nonummy nibh dolore onec placerat interdum purus.</p>
                                <div class="margin-bottom-40"></div>
                                <h3><spring:message code="teamtitle2" /></h3>
                                <p>Etiam aliquam ex pulvinar odio dictum commodo. Nulla dui risus, egestas sit amet nisi et, eleifend cursus odio.</p>
                                <div class="margin-bottom-40"></div>
                                <h3><spring:message code="teamtitle3" /></h3>
                                <p>Donec placerat interdum purus, at finibus enim aliquam non. Etiam congue fringilla pharetra. Vestibulum facilisis lectus eros. Etiam congue fringilla pharetra. Lorem niam ipsum dolor sit ammet adipiscing e</p> --%>
                            </div>
                        </div>
                    </div><!-- //end row -->
                </div>
            </div>
            <!-- Team END -->
        </section>
        <!-- END TEAM SECTION -->

        <!-- BEGIN CLIENTS SECTION -->
        <section id="clients">
            <div class="clients">
                <div class="clients-bg">
                    <div class="container">
                        <div class="heading-blue">
                            <%-- <h2><spring:message code="clients" /></h2>
                            <p><spring:message code="clientstxt" /></p> --%>
                        </div><!-- //end heading -->

                        <!-- Owl Carousel -->
                        <div class="owl-carousel">
                            <div class="item" data-quote="#client-quote-1">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo1.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-2">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo2.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-3">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo3.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-4">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo4.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-5">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo5.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-6">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo6.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-7">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo7.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-8">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo8.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-9">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo9.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-10">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo10.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-11">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo11.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-12">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo12.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-13">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo13.png" alt="">
                            </div>
                            <div class="item" data-quote="#client-quote-14">
                                <img src="${cdnAddress}/css/frontend/onepage2/img/clients/logo14.png" alt="">
                            </div>
                        </div>
                        <!-- End Owl Carousel -->
                    </div>
                </div>
                
                <!-- Clients Quotes -->
                <div class="clients-quotes">
                    <div class="container">
                        <div class="client-quote" id="client-quote-1">
                            <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit euismod tincidunt ut laoreet dolore magna aliquam dolor sit amet consectetuer elit</p>
                            <h4>Mark Nilson</h4>
                            <span><spring:message code="clientsmem1" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-2">
                            <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit euismod tincidunt aliquam dolor sit amet consectetuer elit</p>
                            <h4>Lisa Wong</h4>
                            <span><spring:message code="clientsmem2" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-3">
                            <p>Lorem ipsum dolor sit amet consectetuer elit euismod tincidunt aliquam dolor sit amet elit</p>
                            <h4>Nick Dalton</h4>
                            <span><spring:message code="clientsmem3" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-4">
                            <p>Fusce mattis vestibulum felis, vel semper mi interdum quis. Vestibulum ligula turpis, aliquam a molestie quis, gravida eu libero.</p>
                            <h4>Alex Janmaat</h4>
                            <span><spring:message code="clientsmem4" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-5">
                            <p>Vestibulum sodales imperdiet euismod.</p>
                            <h4>Jeffrey Veen</h4>
                            <span><spring:message code="clientsmem5" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-6">
                            <p>Praesent sed sollicitudin mauris. Praesent eu metus laoreet, sodales orci nec, rutrum dui.</p>
                            <h4>Inna Rose</h4>
                            <span><spring:message code="clientsmem6" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-7">
                            <p>Sed ornare enim ligula, id imperdiet urna laoreet eu. Praesent eu metus laoreet, sodales orci nec, rutrum dui.</p>
                            <h4>Jacob Nelson</h4>
                            <span><spring:message code="clientsmem7" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-8">
                            <p>Adipiscing elit euismod tincidunt ut laoreet dolore magna aliquam dolor sit amet consectetuer elit</p>
                            <h4>John Doe</h4>
                            <span><spring:message code="clientsmem8" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-9">
                            <p>Nam euismod fringilla turpis vitae tincidunt, adipiscing elit euismod tincidunt aliquam dolor sit amet consectetuer elit</p>
                            <h4>Michael Stawson</h4>
                            <span><spring:message code="clientsmem9" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-10">
                            <p>Quisque eget mi non enim efficitur fermentum id at purus.</p>
                            <h4>Liam Nelsson</h4>
                            <span><spring:message code="clientsmem10" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-11">
                            <p>Integer et ante dictum, hendrerit metus eget, ornare massa.</p>
                            <h4>Madison Klarsson</h4>
                            <span><spring:message code="clientsmem11" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-12">
                            <p>Vestibulum sodales imperdiet euismod.</p>
                            <h4>Ava Veen</h4>
                            <span><spring:message code="clientsmem12" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-13">
                            <p>Ut sit amet nisl nec dui lobortis gravida ut et neque. Praesent eu metus laoreet, sodales orci nec, rutrum dui.</p>
                            <h4>Sophia Williams</h4>
                            <span><spring:message code="clientsmem13" /></span>
                        </div>
                        <div class="client-quote" id="client-quote-14">
                            <p>Nam non vulputate orci. Duis sed mi nec ligula tristique semper vitae pretium nisi. Pellentesque nec enim vel magna pulvinar vulputate.</p>
                            <h4>Melissa Korn</h4>
                            <span><spring:message code="clientsmem14" /></span>
                        </div>
                    </div>
                </div>
                <!-- End Clients Quotes -->
            </div>
        </section>
        <!-- END CLIENTS SECTION -->

        <!-- BEGIN PORTFOLIO SECTION -->
        <section id="portfolio">
            <div class="portfolio">
                <div class="container">
                    <div class="heading">
                        <!-- <h2>Theme <strong>Portfolio</strong></h2> -->
                    </div>

                    <div class="cube-portfolio">
                        <div id="filters-container" class="cbp-l-filters-alignCenter">
                        <%--   <div data-filter="*" class="cbp-filter-item-active cbp-filter-item"><spring:message code="portfoliotit1" /></div> 
                            <div data-filter=".ecommerce" class="cbp-filter-item"><spring:message code="portfoliotit2" /></div>
                            <div data-filter=".admin" class="cbp-filter-item"><spring:message code="portfoliotit3" /></div>
                            <div data-filter=".corporate" class="cbp-filter-item"><spring:message code="portfoliotit4" /></div>
                            <div data-filter=".retail" class="cbp-filter-item"><spring:message code="portfoliotit5" /></div>--%>
                        </div> 
                        <div class="row">
                            <div class="col-md-5 md-margin-bottom-50">
                                <div class="heading-left">
                                  <%--  <h2>
                                        <strong><spring:message code="ourwork" /></strong>
                                        <br>
                                        Lorem ipsum dolor
                                    </h2>
                                    <p>Lorem ipsum dolor sit amet consectetuer ipsum elit sed diam nonummy et euismod tincidunt ut laoreet dolore elit magna aliquam erat et ipsum volutpat magna aliquam  sed diam dolore lorem ipsum dolor sit amet consectetuer ipsum.</p><br>
                                    <a href="#" class="btn-brd-primary"><spring:message code="readmore" /></a> --%>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <!-- Cube Portfolio -->
                                <div id="grid-container" class="cbp-l-grid-agency">
                                    <div class="cbp-item ecommerce">
                                        <div class="cbp-caption">
                                            <div id="cbp-caption-hover-gradient_0" class="cbp-caption-hover-gradient">
                                                <img id ="electronicSrc"  alt="">
                                            </div>
                                            <%-- <div class="cbp-caption-activeWrap">
                                                <div class="cbp-l-caption-alignCenter">
                                                    <div class="cbp-l-caption-body portfolio-icons">
                                                        <a href="${cdnAddress}/css/frontend/onepage2/img/portfolio/01.jpg" class="cbp-lightbox" data-title="Title"><i class="fa fa-search"></i></a>
                                                        <a href="#"><i class="fa fa-file"></i></a>
                                                    </div>
                                                </div>
                                            </div> --%>
                                        </div>
                                    </div>
                                    <div class="cbp-item admin">
                                        <div class="cbp-caption">
                                            <div id="cbp-caption-hover-gradient_1" class="cbp-caption-hover-gradient">
                                                <img id="subjectSrc" alt="">
                                            </div>
                                           <%--  <div class="cbp-caption-activeWrap">
                                                <div class="cbp-l-caption-alignCenter">
                                                    <div class="cbp-l-caption-body portfolio-icons">
                                                        <a href="${cdnAddress}/css/frontend/onepage2/img/portfolio/02.jpg" class="cbp-lightbox" data-title="Title"><i class="fa fa-search"></i></a>
                                                        <a href="#"><i class="fa fa-file"></i></a>
                                                    </div>
                                                </div>
                                            </div> --%>
                                        </div>
                                    </div>
                                    <div class="cbp-item corporate">
                                        <div class="cbp-caption">
                                            <div id="cbp-caption-hover-gradient_2" class="cbp-caption-hover-gradient">
                                                <img id="corporateSrc" alt="">
                                            </div>
                                           <%--  <div class="cbp-caption-activeWrap">
                                                <div class="cbp-l-caption-alignCenter">
                                                    <div class="cbp-l-caption-body portfolio-icons">
                                                        <a href="${cdnAddress}/css/frontend/onepage2/img/portfolio/03.jpg" class="cbp-lightbox" data-title="Title"><i class="fa fa-search"></i></a>
                                                        <a href="#"><i class="fa fa-file"></i></a>
                                                    </div>
                                                </div>
                                            </div> --%>
                                        </div>
                                    </div>
                                    <div class="cbp-item retail">
                                        <div class="cbp-caption">
                                            <div id="cbp-caption-hover-gradient_3" class="cbp-caption-hover-gradient">
                                                <img id="retailSrc" alt="">
                                            </div>
                                           <%--  <div class="cbp-caption-activeWrap">
                                                <div class="cbp-l-caption-alignCenter">
                                                    <div class="cbp-l-caption-body portfolio-icons">
                                                        <a href="${cdnAddress}/css/frontend/onepage2/img/portfolio/04.jpg" class="cbp-lightbox" data-title="Title"><i class="fa fa-search"></i></a>
                                                        <a href="#"><i class="fa fa-file"></i></a>
                                                    </div>
                                                </div>
                                            </div> --%>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Cube Portfolio -->
                        </div>
                    </div><!-- //end row -->
                </div>
            </div>
        </section>
        <!-- END PORTFOLIO SECTION -->

        <!-- BEGIN PRICING SECTION -->
        <%-- <section id="pricing">
            <div class="pricing-bg">
                <div class="container">
                    <div class="heading">
                        <h2><spring:message code="pricing" /></h2>
                        <P><spring:message code="pricingtxt" /></P>
                    </div><!-- //end heading -->

                    <!-- Pricing -->
                    <div class="row no-space-row">
                        <div class="col-md-4">
                            <div id="col-md-4_0" class="pricing no-right-brd">
                               <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/icon4.png" alt="">
                                <h4><spring:message code="pricingtit1" /></h4>
                                <span><spring:message code="pricingtit1-price" /></span>
                                <ul class="pricing-features">
                                    <li><spring:message code="pricingtit1-copies" /></li>
                                    <li><spring:message code="pricingtit1-data" /></li>
                                    <li><spring:message code="pricingtit1-users" /></li>
                                    <li><spring:message code="pricingtit1-forst" /></li>
                                </ul>
                                <button type="button" class="btn-brd-primary"><spring:message code="purchase" /></button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div id="col-md-4_1" class="pricing pricing-red">
                                 <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/icon5.png" alt="">
                                <h4><spring:message code="pricingtit2" /></h4>
                                <span><spring:message code="pricingtit2-price" /></span>
                                <ul class="pricing-features">
                                    <li><spring:message code="pricingtit2-copies" /></li>
                                    <li><spring:message code="pricingtit2-data" /></li>
                                    <li><spring:message code="pricingtit2-users" /></li>
                                    <li><spring:message code="pricingtit2-forst" /></li>
                                </ul>
                                <button type="button" class="btn-brd-white"><spring:message code="purchase" /></button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div id="col-md-4_2" class="pricing no-left-brd">
                                 <img src="${cdnAddress}/css/frontend/onepage2/img/widgets/icon6.png" alt="">
                                <h4><spring:message code="pricingtit3" /></h4>
                                <span><spring:message code="pricingtit3-price" /></span>
                                <ul class="pricing-features">
                                    <li><spring:message code="pricingtit3-copies" /></li>
                                    <li><spring:message code="pricingtit3-data" /></li>
                                    <li><spring:message code="pricingtit3-users" /></li>
                                    <li><spring:message code="pricingtit3-forst" /></li>
                                </ul>
                                <button type="button" class="btn-brd-primary"><spring:message code="purchase" /></button>
                            </div>
                        </div>
                    </div><!-- //end row -->
                    <!-- End Pricing -->
                </div>
            </div>
        </section> --%>
        <!-- END PRICING SECTION -->

        <!-- BEGIN CONTACT SECTION -->
        <section id="contact">
            <!-- Footer -->
            <div class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="heading-left-light">
                              <%--  <h2><spring:message code="contact" /></h2>
                                <p><spring:message code="contacttxt" /></p> --%>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form">
                                <div style="color:#fff;" class="form-wrap">
                                    <div class="form-wrap-group">
                                       <input id="userName" name="userName" type="text" placeholder="" 
                                       		 class="form-control xareabox"> 	 
                                        <input id="theme" name="theme" type="text" placeholder="" 
                                        	class="border-top-transparent form-control xareabox "> 
                                    </div>                
                                    <div class="form-wrap-group border-left-transparent">
                                        <input id="email" name="email" type="text" placeholder="" 
                                       		 class="form-control xareabox">
                                        <input id="phone" name="phone" type="text" placeholder="" 
                                        	 class="border-top-transparent form-control xareabox">
                                    </div>                
                                </div>
                            </div>
                            <textarea id="comment" name="comment" rows="8" placeholder="" 
                            	class="border-top-transparent form-control xareabox"></textarea>
                            <button id="contacttxt-send" onclick="sayToJod()" type="submit" class="btn-danger btn-md btn-block"></button>
                        </div>
                    </div><!-- //end row -->
                </div>
            </div>
            <!-- End Footer -->

            <!-- Footer Coypright -->
            <div class="footer-copyright">
                <div class="container">
                    <h3>JOD</h3> <P style="color:#fff"><spring:message code="footer" /></P>
                    <ul class="copyright-socials">
                    <!--     <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li> -->
                    </ul>
                </div>
            </div>
            <!-- End Footer Coypright -->
        </section>
        <!-- END CONTACT SECTION -->
    </div>
    <!-- END MAIN LAYOUT -->
    <a href="#intro" class="go2top"><i class="fa fa-arrow-up"></i></a>

<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="${cdnAddress}/css/global/plugins/respond.min.js"></script>
<script src="${cdnAddress}/css/global/plugins/excanvas.min.js"></script> 
<![endif]-->
<script src="${pageContext.request.contextPath}/scripts/offLanguageRead.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="${cdnAddress}/css/global/plugins/jquery.easing.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/global/plugins/jquery.parallax.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/global/plugins/smooth-scroll/smooth-scroll.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/global/plugins/owl.carousel/owl.carousel.min.js" type="text/javascript"></script>
<!-- BEGIN Cubeportfolio -->
<script src="${cdnAddress}/css/global/plugins/cubeportfolio/cubeportfolio/js/jquery.cubeportfolio.min.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/frontend/onepage2/scripts/portfolio.js" type="text/javascript"></script>
<!-- END Cubeportfolio -->
<!-- BEGIN RevolutionSlider -->  
<script src="${cdnAddress}/css/global/plugins/slider-revolution-slider/rs-plugin/js/jquery.themepunch.revolution.min.js" type="text/javascript"></script> 
<script src="${cdnAddress}/css/global/plugins/slider-revolution-slider/rs-plugin/js/jquery.themepunch.tools.min.js" type="text/javascript"></script>
<script src="${cdnAddress}/css/frontend/onepage2/scripts/revo-ini.js" type="text/javascript"></script>
<!-- END RevolutionSlider -->
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="${cdnAddress}/css/frontend/onepage2/scripts/layout.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<%-- 从数据库读取数据并显示 --%>

<%-- 轮播图js --%>
<script src="${cdnAddress}/js/jquery.flexslider-min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

	$('.flexslider').flexslider({

		directionNav: true,

		pauseOnAction: false,
		slideshowSpeed: 3000,

	});

});
</script>

<script>
jQuery(document).ready(function() {    
    Layout.init();
    RevosliderInit.initRevoSlider();
});
</script>
<!-- <style>
#grid-container{
	height:628px !important;
}
.corporate,.retail{
	top:324px !important;
}
</style> -->
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</script>

<style>
#grid-container{
	height:628px !important;
}
.corporate,.retail{
	top:324px !important;
}
 #pic { position: absolute; }
</style>
</html>